<template>
  <main-layout>
    <!-- 头部 -->
    <header-layout pagename="阳光果绿"/>
    <!-- 主体 -->
    <div class="main">
        <!-- 搜索定位 -->
        <div class="top">
            <div class="subtop">
                <div class="address" >
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei"></use>
                    </svg>
                </div>
                <div class="addressName">张三省，张三市</div> 
                <sear-compot/>
            </div>
        </div>
        <!-- 广告 -->
        <!-- <div class="banner">
            <div>
                <img src="../../images/home/1_banner.jpg" alt="">
            </div>
        </div> -->
        <div class="banner">
            <van-swipe :autoplay="3000" >
              <van-swipe-item v-for="photo in banner" :key="photo.id">
                <img v-lazy="photo.img_url" />
                <!-- <img v-lazy="photo.img_url" /> -->
              </van-swipe-item>
            </van-swipe>
        </div>
        
        
        <!-- 推荐，新品，产地特色 -->
        <div class="recommend">
            <div class="sub-recommend">
                <div v-for="rec in recommend" :key="rec.id">
                    <div class="imag"><img :src="rec.coin" alt=""></div>
                    <p>{{rec.title}}</p>
                </div>
            </div>
        </div>
        <!-- 每日限时特价 -->
        <div class="cheap-price">
            <a href="#"><img src="../../images/home/1.yglg-home_02.jpg" alt=""></a>
        </div>
        <!-- 限时秒杀 -->
        <div class="limi-time">
            <div class="sublimi-time container">
                <div class="lmt-top">
                    <div class="lmt-t-left">
                        <p>限时<span>秒杀</span></p>
                        <p>仅剩00000</p>
                    </div>
                    <div class="lmt-t-right">
                        <span>查看更多></span>
                    </div>
                </div>
                <!-- 限时秒杀商品 -->
                <div class="lm-time-product">
                    <div class="box" v-for="lmt in lmtime" :key="lmt.id">
                        <div class="lm_image"><img :src="lmt.img1" alt=""></div>
                        <div class="lm_title_price">
                            <h3>{{ lmt.goodname }}</h3>
                            <p>已售{{ lmt.sales }}箱</p>
                            <div class="pirce-style">
                                <div class="pirce-style-l">
                                    <span class="pirce">￥{{ lmt.price }}</span>
                                    <span class="ogpirce">￥{{ lmt.org_price }}</span>
                                </div>
                                <span class="addCarIcon" @click="handleAddToCart(lmt)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 甜蜜的诱惑 -->
        <div class="container advertise">
            <img src="../../images/home/advertise.jpg" alt="">
        </div>

        <!-- 为你推荐 -->
        <div class="recommendList container">
            <div class="sub-recommendList">
                <div class="listTop">
                    <div class="listTop-left">
                        <span>为你推荐</span>
                    </div>
                    <div class="listTop-right">
                        <span>查看更多></span>
                    </div>
                </div>
                <!-- 为你推荐列表 -->
                <div class="listContent">
                    <div class="item" v-for="litem in listContent" :key="litem.id" >
                        <div class="box">
                            <div class="itemimg" @click="goToDetail(litem.id)">
                                <img :src="litem.img1" alt="">
                            </div>
                            <div class="titleAndPrice">
                                <div class="title">
                                    <span class="titleAndPrice_tle">{{litem.goodname}}<span>(约{{litem.weight}}斤,礼盒装)</span></span>
                                    <p>{{litem.label}}</p>
                                </div>
                                <div class="price">
                                    <div class="price-l">
                                        <span class="disPrices">￥{{litem.price}}</span>
                                        <span class="origPrice">￥{{litem.org_price}}</span>
                                    </div>
                                    <span class="addCar" @click="handleAddToCart(litem)">加入购物车</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
  </main-layout>
</template>

<script>
  import { homeBannerApi,homeClassApi,homeLisContenttApi,homeLisLmtimeApi } from '@/apis/homeApi'
  import {searchProduct} from '@/apis/searchApi'

  export default {
    data(){
        return{
            //banner广告和限时横图信息
            banner:[],
            //推荐，新品，产地特色
            recommend:[],
            //显示秒杀列表数组
            lmtime:[],
            //为你推荐列表数组
            listContent:[],
            spList:null
        }
    },
    created(){
      //banner广告和限时横图信息
      homeBannerApi()
        .then(data =>{
            this.banner = data.data.bannerArr
            console.log('banner',this.banner);
        })
      //推荐，新品，产地特色
      homeClassApi()
      .then(clsdata =>{
          this.recommend = clsdata.data.infoarr
          console.log('产地特色',this.recommend);
      })
      // 为你推荐列表数据
      homeLisContenttApi()
        .then(ctdata => {
            // const Data = JSON.stringify(data)
            // console.log(Data)
            this.listContent = ctdata.data.infoarr
            console.log('为你推荐列表数据',this.listContent)
        })
        // .catch(err => console.log('访问分类异常：',err))
      
      //限时秒杀列表数据
      homeLisLmtimeApi()
        .then(lmdata=>{
            this.lmtime = lmdata.data.infoarr
            console.log('限时秒杀列表数据',this.lmtime)
        })
        searchProduct()
            .then(data =>{
                this.spList = data
                console.log('搜索的',this.spList);
            })
    },
    
    methods:{
        //去详情页面
        goToDetail(id){
            this.$router.push({
                name:'detail',
                params:{
                    id
                }
            })
        },
        
        //加入购物车
        handleAddToCart(prod){
            console.log("prod",prod);
            //结构当前商品详情中的各属性
            const { id,goodname,img1,price } = prod
            //构建当前选购的商品对象
            const currentProduct ={
                id,
                goodname,
                img1,
                price,
                amount:1
            }
            //保存到store中
            //组件中不能直接调用到mutation方法，需要使用store.commit()提交mutation
            this.$store.commit('cartModule/addToCart',{currentProduct})
            this.$toast({
                type:'success',
                message:'加入购物车成功'
            })
            console.log('this.$store:',this.$store)
        }
    },
  }
</script>

<style lang="less" scoped>
  @import '../../style/home.less';

</style>